<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>一朵 -- 提交订单</title>
  <!-- swiper-2.7css -->
    <link rel="stylesheet" href="__STATIC__/index/js/swiper/idangerous.swiper.css">
  <!-- swiper-2.7js -->
    <script src="__STATIC__/index/js/swiper/idangerous.swiper.min.js"></script>
  <!-- jquery-3.2.1引用 -->
    <script src="__STATIC__/index/js/global/jquery-3.2.1.min.js"></script>
  <!-- 阿里巴巴矢量图库 -->
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_561814_qyaihbkw7dx3whfr.css">
  <!-- 公共头部 脚部 -->
    <link rel="stylesheet" href="__STATIC__/index/css/global/global.css">
  <!-- 超过1200屏幕 -->
    <link rel="stylesheet" media="screen and (min-width: 1200px)" href="__STATIC__/index/css/order/order1200.css" />
  <!-- 1080-1200 -->
    <link rel="stylesheet" media="screen  and (min-width: 1080px) and (max-width: 1199px) " href="__STATIC__/index/css/order/order1080.css"
    />
  <!-- 960-1080 -->
    <link rel="stylesheet" media="screen  and (min-width: 960px) and (max-width: 1079px) " href="__STATIC__/index/css/order/order960.css"
    />
  <!-- 768-959 -->
    <link rel="stylesheet" media="screen  and (min-width: 768px) and (max-width: 959px) " href="__STATIC__/index/css/order/order768.css"
    />
  <!-- 568-767 -->
    <link rel="stylesheet" media="screen  and (min-width: 568px) and (max-width: 767px) " href="__STATIC__/index/css/order/order568.css"
    />
  <!-- 375-567 -->
    <link rel="stylesheet" media="screen  and (min-width: 375px) and (max-width: 567px) " href="__STATIC__/index/css/order/order375.css"
    />
  <!--引入layer-->
    <script src="__STATIC__/layer/layer.js" ></script>
  <!-- 小于375-->
    <link rel="stylesheet" media="screen  and (max-width: 374px) " href="__STATIC__/index/css/order/order320.css" />
</head>

<body>
<form id="order_form" action="{:url('GoodsList/buy_cash_coupon')}" method="post" >
    <div class="M">
        <div class="m-header">
            <div>

                <span>
                    <span class="iconfont icon-xiangzuo" onclick="go_back();"></span>
                    返回
                </span>
                <span>提交订单</span>
                <span>
                    <a href="{:url('User/index')}" class="my" {if condition="empty($realname)"}style="display: none"{/if}>
                        {$realname}
                    </a>
                    {if condition="empty($realname)"}
                    <a href="{:url('Login/loginin')}">登录</a>
                    <a href="{:url('Login/register')}">注册</a>
                    {/if}
                    <a href="" class="car">
                        <span class="iconfont icon-gouwuche"></span>
                        <span>{$cart_num}</span>
                    </a>
                </span>
            </div>
        </div>
      <!-- 地址选择 -->
      <!-- 商品循环 -->
        <div class="m-goods">
            <div>
                <div>
                    <p>{$coupon.name}</p>
                </div>
                <div>
                    <p>
                        <span>{$coupon.price}</span>
                        <span>x1</span>
                    </p>
                </div>
                <div>
                    <img src="{$coupon.img}" alt="">
                </div>
            </div>
        </div>
      <!-- 订单信息 -->
        <div class="m-time">
            <div>
                <div>
                    <i class="iconfont icon-shijian"></i>
                </div>
                <div>
                    <p>
                        <span>下单时间</span>
                        <span>{$nowtime}</span>
                    </p>
                </div>
            </div>
            <div>
                <div>
                    <i class="iconfont icon-dingdan"></i>
                </div>
                <div>
                    <p>
                        <span>订单号</span>
                        <span>{$order_sn}</span>
                    </p>
                </div>
            </div>
        </div>
      <!-- 订单金额和优惠券 -->
        <!--<div class="m-money">-->
            <!--<div>-->
                <!--<div>-->
                    <!--<i class="iconfont icon-qianbao1"></i>-->
                <!--</div>-->
                <!--<div>-->
                    <!--<p>-->
                        <!--<span>商品总额</span>-->
                        <!--<span class="m-zonge">￥{$coupon.price}</span>-->
                    <!--</p>-->
                <!--</div>-->
            <!--</div>-->
            <!--<div>-->
                <!--<div>-->
                    <!--<i class="iconfont icon-wodeyouhuijuan"></i>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
      <!-- 选择支付方式 -->
        <div class="m-pay">
            <div>
                <i class="iconfont icon-tubiaolunkuo-"></i>
            </div>
            <div>
                {if condition="$is_weixin eq 0"}
                <p class="m_pay" onclick="m_change_pay(this)" data-type="1">
                    <span>支付宝支付</span>
                    <span>
                        <img src="__STATIC__/index/img/order/pay.png" alt="">
                    </span>
                </p>
                {/if}
                <p class="m_pay" onclick="m_change_pay(this)" data-type="2">
                    <span>微信支付</span>
                    <span>
                        <img src="__STATIC__/index/img/order/pay.png" alt="">
                    </span>
                </p>
                <p class="m_pay" onclick="m_change_pay(this)" id="m_yu" data-type="3">
                    <span>余额支付</span>
                    <span>
                        <img src="__STATIC__/index/img/order/pay.png" alt="">
                    </span>
                </p>
            </div>
        </div>
      <!-- 应付总额 -->
        <div class="m-zonge">
            <div>
            </div>
            <div>
                <p>
                    应付总额
                </p>
              <!--<p>支付宝支付</p>-->
            </div>
            <div class="m-final-amount">
                ￥{$coupon.price}
            </div>
        </div>
      <!--填写备注 -->
      <!-- 底部浮动框 -->
        <div class="m-foot">
            <div>
                <a href="javascript:;" onclick="quxiao_order();">取消订单</a>
                <a href="javascript:;" onclick="check_form();">立即付款</a>
            </div>
        </div>
    </div>
    <div class="PC">
        {include file="public/p_header" /}
        <div class="pc-headline">
            <p>
                <span>
                    <span></span> 选择商品
                </span>
                <span>-------------</span>
                <span class="pc-gaoliang">
                    <span></span>确认订单</span>
                <span>-------------</span>
                <span>
                    <span></span>付款</span>
                <span>-------------</span>
                <span>
                    <span></span>交易完成</span>
            </p>
        </div>
  <!-- 列表 -->
        <div class="pc-list">
            <div>
                <div>
                    <span>商品</span>
                </div>
                <div>单价</div>
                <div>数量</div>
                <div>小计</div>
            </div>
        </div>
  <!-- 商品循环 -->
        <div class="pc-goods">
            <div>
                <div>
                    <div>
                        <img src="{$coupon.img}" alt="">
                    </div>
                    <div>
                        <p>{$coupon.name}</p>
                    </div>
                </div>
                <div>¥{$coupon.price}</div>
                <div>1</div>
                <div>¥{$coupon.price}</div>
            </div>
        </div>
  <!-- 下单时间 -->
        <div class="pc-time">
            <p>
                <span class="iconfont icon-shijian"></span>
                <span>下单时间</span>
                <span>{$nowtime}</span>
            </p>
            <p>
                <span class="iconfont icon-dingdan"></span>
                <span>订单号码</span>
                <span>{$order_sn}</span>
            </p>
        </div>
  <!-- 支付方式选择 -->
        <div class="pc-pay">
            <i class="iconfont icon-tubiaolunkuo-"></i>
            <label for="zhifubao" onclick="p_pay_type(1)">
                <input id="zhifubao" type="radio" value="1" name="pay_type" />
                <img src="__STATIC__/index/img/order/zhifubao.png" alt="">
            </label>
            <label for="weixin" onclick="p_pay_type(2)">
                <input id="weixin" type="radio" value="2" name="pay_type" />
                <img src="__STATIC__/index/img/order/weixin.png" alt="">
            </label>
            <label for="yue" onclick="p_pay_type(3)">
                <!--<input id="yue" type="radio" value="3" name="pay_type" {if condition="$member.user_money lt $coupon.price"}disabled {/if}/>-->
                <input id="yue" type="radio" value="3" name="pay_type" />
                <img src="__STATIC__/index/img/order/yue.png" alt="">
            </label>
        </div>

  <!-- 备注 -->
  <!-- 提交 -->
        <div class="pc-submit">
            <div>
                <span>实际付款：
                    <span class="p-final-amount">￥{$coupon.price}</span>
                </span>
                <a href="javascript:;" onclick="check_form()">结算</a>
            </div>
        </div>
  <!-- 添加地址 -->
        <input type="hidden" name="id" value="{$coupon.id}">
        <input type="hidden" name="final_amount" value="{$coupon.price}">
        <input type="hidden" name="zhifu_type" value="">
    </form>
</div>

    <div class="PC" id="pc-">
        {include file="public/p_footer" /}
    </div>
    <script>
        /**
         * 返回
         */
        function go_back(){
            window.history.go(-1);  //返回上一页
        }
        /**
         * 取消订单
         * @returns {boolean}
         */
        function quxiao_order(){
            layer.msg('取消成功',{icon:1,time:1500,shade: 0.1}, function(index){
                layer.close(index);
                window.location.href = "{:url('GoodsList/goods_list')}";
            });
            return false;
        }
        /**
         * 移动端改变支付方式
         */
        function m_change_pay(obj){
            $('.m_pay').removeClass('m-pay-zhong');
            $(obj).addClass('m-pay-zhong');
            $('input[name=pay_type]').val($('.m-pay-zhong').attr('data-type'));
            if($(obj).attr('data-type') == 1){
                $('input[name=pay_type]').eq(0).attr('checked','checked');
                $('input[name=zhifu_type]').val(1);
            }else if($(obj).attr('data-type') == 2){
                $('input[name=pay_type]').eq(1).attr('checked','checked');
                $('input[name=zhifu_type]').val(2);
            }else{
                $('input[name=pay_type]').eq(2).attr('checked','checked');
                $('input[name=zhifu_type]').val(3);
            }
        }

        function p_pay_type(id){
            $('input[name=zhifu_type]').val(id);
            if(id == 1){
                $('.m_pay').removeClass('m-pay-zhong');
                $('.m_pay').eq(0).addClass('m-pay-zhong');
            }else if(id == 2){
                $('.m_pay').removeClass('m-pay-zhong');
                $('.m_pay').eq(1).addClass('m-pay-zhong');
            }else{
                $('.m_pay').removeClass('m-pay-zhong');
                $('.m_pay').eq(2).addClass('m-pay-zhong');
            }
        }
        /**
         *  提交订单检测
         */
        function check_form(){
            var credit = "{$member.user_money}";        //会员余额

            var final_amount = $('input[name=final_amount]').val();
            var pay_type = $('input[name=zhifu_type]').val();

            if(pay_type == ''){
                layer.msg('请选择付款方式',{icon:2,time:1500,shade: 0.1}, function(index){
                    layer.close(index);
                });
                return false;
            }

            if((pay_type == 3) && (credit < final_amount)){          //判断月支付余额是否充足
                layer.msg('您的余额不足，请选择其它支付方式',{icon:2,time:1500,shade: 0.1}, function(index){
                    layer.close(index);
                });
                return false;
            }

            if($('input[name=id]').val() == ''){
                layer.msg('找不到代金券信息，请重新下单',{icon:2,time:1500,shade: 0.1}, function(index){
                    layer.close(index);
                    window.location.href = "{:url('GoodsList/goods_list')}";
                });
                return false;
            }

            $('#order_form').submit();
        }

    </script>
</body>

</html>